import { Conext } from "./pages";
import { useRoutes } from "react-router-dom";
import route from "./router";
import "../src/App.css";
import styles from "./style.module.css";
import { useElement } from "../src/router/useRoutesWithGuard";
import { useCallback } from "react";
import type { Container, Engine } from "tsparticles-engine";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";



// type s = any
export const App = () => {
  let Element = useRoutes(route);
  let ee = useElement("token", route);
  // console.log(ee);
  // console.log(Element);

  const particlesInit = useCallback(async (engine: Engine) => {
    console.log(engine);

    // you can initialize the tsParticles instance (engine) here, adding custom shapes or presets
    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
    // starting from v2 you can add only the features you need reducing the bundle size
    await loadFull(engine);
  }, []);

  const particlesLoaded = useCallback(
    async (container: Container | undefined) => {
      await console.log(container);
    },
    []
  );

  return (
    <div className="app">
      {ee.element}
    </div>
  );
};
